/**
在 React 中，子组件向父组件传递数据的过程通常是通过回调函数来实现的。
  1. 父组件定义回调函数
  - 在父组件中定义一个方法，用于接收子组件传来的数据。
  - 将这个方法作为 props 传递给子组件。
  jsx
  // 父组件
  class Parent extends React.Component {
    handleDataFromChild = (data) => {
      console.log('Data from child:', data);
    };

    render() {
      return <Child sendData={this.handleDataFromChild} />;
    }
  }

  // 子组件
  const Child = (props) => {
    const handleClick = () => {
      props.sendData('Hello from Child!');
    };

    return <button onClick={handleClick}>Send Data to Parent</button>;
  };
  2. 子组件调用父组件的回调函数
  - 在子组件中，当需要将数据传递给父组件时，调用通过 props 接收到的回调函数，并传入数据。

  3. 注意事项
  - 单向数据流：数据在 React 中是单向流动的，子组件不能直接修改父组件的状态，而是通过回调函数将数据传递给父组件。
  - 状态提升：如果多个子组件需要共享同一状态，可以将状态提升到它们的共同父组件中，以便通过回调函数进行通信。
  - 解耦合：通过回调函数的方式，可以使父子组件之间的耦合度降低，提高组件的复用性。

  4. 总结
  子组件通过调用父组件传递的回调函数，将数据传递给父组件，是 React 组件之间通信的重要方式。这种方法保持了数据流的单向性，使得组件之间的关系更加清晰，便于管理和维护。
 */
import React, { Component } from 'react'
import NavBar from './nav-bar'

export default class App extends Component {
  
  render() {
    const left = <div>左</div>
    const right = (<div>右</div>)

    return (
      <div>
        <h3>1. 使用children实现插槽</h3>
        <NavBar>
          <div>首页</div>
          <div>列表</div>
          <div>我的</div>
        </NavBar>

        <h3>2. 使用children实现插槽</h3>
        <NavBar
          leftSlot={left}
          centerSlot={<div>中间</div>}
          rightSlot={right}
        >
        </NavBar>
      </div>
    )
  }
}
